<template>
  <view class="app-post">
    <Navbar title="发布"> </Navbar>
    <view class="content">
        <view class="textarea">
          <textarea  placeholder="记录新鲜事，分享这一刻~" v-model="form.content"></textarea>
        </view>
        <view class="location" @click="handleChooseLocation">
            <view class="label">
               <img src="/static/community/location2.png" alt=""> 
               <span>你的位置</span>
            </view>
            <view class="title">
                <span>{{form.location?form.location:'请选择位置'}}</span>
                <span class="arrow"></span>
            </view>
        </view>
        <!-- <view class="labels">
            <view class="label">长沙市</view>
            <view class="label">五一广场-黄兴步行街</view>
            <view class="label">德思勤-四季汇</view>
        </view> -->
        <view class="postImg">
            <view class="img" v-for="(item,index) in form.imgUrlList" :key="index">
              <image mode="aspectFill" :src="item"></image>
              <icon class="close" type="clear" size="22" @click="handleCloseImg(index)" />
              <view class="progress"></view>
            </view>
            <view class="img" @click="handleUpload">
              <image class="defualt" src="/static/community/default.png"></image>
            </view>
        </view>
        <view class="footer">
          <view class="btn" @tap="handleSubmit">发布</view>
        </view>
    </view>
  </view>
</template>
<script>
import config from '@/request/config.js';
export default {
  data() {
    return {
      form:{
        locationDescription:"",
        location:"",
        latitude: "28.265297",
        longitude: "112.875932",
        content:"",
        imgUrlList:[]
      }
    }
  },
  methods: {
    //发布
    handleSubmit(){
      if(!this.form.content){
        return uni.showToast({title:"请输入发布内容",icon:"none"}) 
      }
      if(!this.form.location){
        return uni.showToast({title:"选择位置",icon:"none"}) 
      }
      if(!this.form.imgUrlList.length){
        return uni.showToast({title:"请上传图片",icon:"none"})
      }
      this.$http.post("/business/business/tags/add",this.form).then(res=>{
        if(res.retCode == '200'){
          uni.showToast({title:"发布成功"})
          setTimeout(() => {
            uni.navigateBack() 
          }, 500);
        }
      })
    },
    //上传图片
    handleUpload(){
      uni.chooseImage({
        success: (chooseImageRes) => {
          const tempFilePaths = chooseImageRes.tempFilePaths;
          tempFilePaths.forEach(x=>{
            const token = uni.getStorageSync("token")
            uni.uploadFile({
              url: config.baseUrl+'/file/file/path',
              filePath: x,
              name: 'file',
              header:{
                'Content-Type': 'multipart/form-data',
                'Authorization': "Bearer "+token
              },
              success: (uploadFileRes) => {
                const data=JSON.parse(uploadFileRes.data)
                this.form.imgUrlList.push(data.retObject)
              }
            });
          })
        }
      });

    },
    //删除图片
    handleCloseImg(index){
      this.form.imgUrlList.splice(index,1)
    },
    //选择位置
    handleChooseLocation(){
      uni.authorize({  
        scope: 'scope.userLocation',  
        success:()=> {  
          uni.chooseLocation({
            success:(res)=> {
              // res为成功返回的结果对象，包含了经度、纬度等信息
              console.log('选择的位置名称：', res.name);
              console.log('选择的位置经度：', res.longitude);
              console.log('选择的位置纬度：', res.latitude);
              console.log('选择的位置地址：', res.address);
              this.form.longitude=res.longitude
              this.form.latitude=res.latitude
              this.form.locationDescription= res.name || res.address
              this.form.location=res.name 
            }
          })
        }
      })
     
    }
  },
}
</script>
<style lang="scss" scoped>
  .content{
    padding: 0 30rpx;
    .textarea{
      width: 100%;
      height: 400rpx;
      background: linear-gradient(180deg, #F5F6F7 0%, rgba(245,246,247,0) 100%);
      border-radius: 30rpx 30rpx 30rpx 30rpx;
      textarea{
        padding: 40rpx 30rpx;
        font-size: 30rpx;
        color: #909399;
      }
    }
    .location{
      display: flex;
      align-items: center;
      justify-content: space-between;
      .label{
        font-size: 30rpx;
        font-weight: 500;
        display: flex;
        align-items: center;
        img{
          width: 40rpx;
          height: 40rpx;
          margin-right: 6rpx;
        }
      }
      .title{
        font-size: 28rpx;
        font-weight: 500;
        color: #909399;
        display: flex;
        align-items: center;
        .arrow{
          width: 12rpx;
          height: 12rpx;
          opacity: 1;
          border-top: 3rpx solid #1A0C21;
          border-right: 3rpx solid #1A0C21;
          display: inline-block;
          transform: rotate(45deg);
          margin-left: 28rpx;
        }
      }
    }
    .labels{
      display: flex;
      white-space: nowrap;
      margin-top: 34rpx;
      overflow-x: auto;
      .label{
        padding: 16rpx 40rpx;
        background: #F5F6F7;
        border-radius: 52rpx;
      }
      .label+.label{
        margin-left: 20rpx;
      }
    }
    .postImg{
      margin-top: 56rpx;
      display: flex;
      flex-wrap: wrap;
      .img{
        width: 210rpx;
        height: 210rpx;
        background: #F5F6F7;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 20rpx;
        position: relative;
        margin-bottom: 30rpx;
        image{
          width: 100%;
          height: 100%;
          border-radius: 20rpx;
        }
        .defualt{
          width: 84rpx;
          height: 84rpx;
        }
        .close{
          position: absolute;
          right: 0;
          top: -4rpx;
          top: 0;
          background-color: #fff;
          // border-radius: 0rpx 20rpx 0rpx 12rpx;
          border-radius: 50%;
        }
        .progress{
          width: 80rpx;
          height: 4rpx;
          background: #16D998;
          border-radius: 100rpx 100rpx 100rpx 100rpx;
          position: absolute;
          bottom: -10rpx;
        }
      }
      .img+.img{
        margin-left: 30rpx;
      }
      
    }
    &>.footer{
      position: fixed;
      bottom: 40rpx;
      width: 100%;
      left: 0;
      .btn{
        height: 88rpx;
        line-height: 88rpx;
        background: #16D998;
        border-radius: 44rpx 44rpx 44rpx 44rpx;
        font-size: 30rpx;
        font-weight: 500;
        text-align: center;
        margin:  0 30rpx;
      }
    }
  }
</style>